<template>
	<view class="content">
		<view class="head" v-if="state == 1">
			<i class="iconfont iconjiaoyichenggong"></i>
			<view class="head-status-title">交易成功</view>
		</view>
		<view class="head" v-if="state == 2">
			<i class="iconfont icondaifukuan"></i>
			<view class="head-status-title">待付款</view>
		</view>
		<view class="title">订单详情</view>
		<view class="detail">
			<view>订&nbsp;&nbsp;单 号:　<text>12345678910</text></view>
			<view>订&nbsp;&nbsp;单 名:　<text>九年级语文模拟试卷解析.doc</text><view>查看</view></view>
			<view>学　　科:　<text>语文</text></view>
			<view>下单时间:　<text>2015-15-05 12:00:00</text></view>
			<view>上传老师:　<text>王亮老师</text></view>
			<view>订单金额:　<text>¥8.0</text></view>
			<view>学情分抵扣:　<text>-￥2.0</text></view>
			<view>支付金额:　<text>¥8.0</text></view>
			<!-- <view>支付方式:　<text>家长代付</text></view> -->
		</view>
		<view class="btn-box">
			<view class="btn-common go-question">前往试题</view>
			<view class="btn-common go-pay" v-if="state == 2" @tap="goPay">前往支付</view>
		</view>
		<!-- <view class="explain">支付方式说明包含：家长代付，微信，支付宝，余额，银行卡</view> -->
		<!-- 支付弹框 -->
		<view class="pay-pop" v-if="showPay" @tap.stop>
			<view class="pay-cont">
				<view class="pay-head">
					<i class="iconfont iconguanbi pay-head-i" @tap="closePop"></i>
					<view class="pay-head-text">确认支付</view>
				</view>
				<view class="pay-n">¥8.0</view>
				<view class="pay-pattern">选择付款方式</view>
				<scroll-view scroll-y class="bank-card-box">
					<view class="row4_item" v-for="(item, index) in items" :key="index" @tap="changeType(index,item.value)">
						<view class="row4_item_letf">
							<i :class="item.class"></i>
							<text>{{item.text}}</text>
						</view>
						<i class="iconfont" :class="[change == index ? 'iconduigou' : '']"></i>
					</view>
					<navigator hover-class="false" class="row4_item" url="addBankcard">
						<view class="row4_item_letf">
							<i class="iconfont iconyinhangka icon-styl4"></i>
							<text class="addCard">添加银行卡</text>
						</view>
						<view class="row4_item_rgith">
							<i class="iconfont iconjiantou icon-styl5"></i>
						</view>
					</navigator>
				</scroll-view>
				<view class="pay-btn" @tap="closePop">确认付款</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [
					{
						class: 'iconfont iconyue-mian icon-styl0',
						text: '账户余额',
						value: 0
					},{
						class: 'iconfont iconzhifubao icon-styl1',
						text: '支付宝支付',
						value: 1
					},{
						class: 'iconfont iconweixinzhifu icon-styl2',
						text: '微信支付',
						value: 2
					}
				],
				change: 0,
				payType: '',
				showPay: false,
				currentSelect: 0,
				state: 0
			}
		},
		onLoad(e) {
			this.state = e.state;
		},
		methods: {
			goPay() {
				this.showPay = true
			},
			closePop() {
				this.showPay = false
			},
			/* 切换支付类型 */
			changeType(index,value) {
				this.change = index;
				this.payType = value;
			},
		}
	}
</script>

<style>
	.content {
		position: absolute;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	/**
	 * 头部样式
	 */
	.head {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 120upx;
		background-color: #FF9900;
		color: #ffffff;
		font-size: 38upx;
	}
	.head i{
		font-size: 50upx;
	}
	.head-status-title {
		margin-left: 16upx;
		font-size: 38upx;
	}
	/**
	 * 头部样式结束
	 */
	.title {
		display: flex;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
		width: 690upx;
		height: 94upx;
		font-size: 36upx;
		color: #333333;
		border-bottom: 1px solid rgba(229,229,229,1);
	}
	
	.detail {
		margin-left: auto;
		margin-right: auto;
		width: 690upx;
		border-bottom: 1px solid rgba(229,229,229,0.6);
		padding: 15upx 0upx;
	}
	.detail view {
		display: flex;
		min-height: 70upx;
		color: #333333;
		font-size: 34upx;
	}
	.detail view text{
		width: 70%;
		margin-left: 20upx;
	}
	.detail view view{
		position: absolute;
		right: 30upx;
		color: #00D5A2;
	}
	.item-name {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 150upx;
		font-size: 34upx;
		color: #333333;
	}
	.item-cont {
		display: flex;
		align-items: center;
		margin-left: 13upx;
		font-size: 34upx;
		color: #333333;
	}
	.add-browse {
		margin-top: 8upx;
		margin-left: 13upx;
		font-size: 34upx;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 437upx;
	}
	.browse {
		display: flex;
		align-items: center;
		font-size: 34upx;
		color: #00D5A2;
		margin-left: 24upx;
	}
	
	/* .name-center2 {
		letter-spacing: 3upx;
	}
	.name-center3 {
		letter-spacing: 3upx;
	}
	.name-center4 {
		letter-spacing: 3upx;
	} */
	
	.btn-box {
		display: flex;
		justify-content: flex-end;
		margin: 22upx auto;
		width: 690upx;
	}
	.btn {
		display: flex;
	}
	.btn-common {
		display: flex;
		justify-content: center;
		align-content: center;
		width: 160upx;
		height: 60upx;
		border-radius: 8upx;
		font-size: 34upx;
		margin-left: 15upx;
	}
	.go-question {
		color: #00D5A2;
		border: 1px solid #00D5A2;
	}
	.go-pay {
		color: #FF9900;
		border: 1px solid #FF9900;
	}
	.explain{
		color: #CCCCCC;
		font-size: 34upx;
		position: absolute;
		bottom: 120upx;
		margin: 0 30upx;
	}
	/**
	 * 详情结束
	 */
	
	.pay-pop {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9998;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .4);
	}
	.pay-cont {
		position: absolute;
		z-index: 9999;
		bottom: 0;
		width: 750upx;
		height: 780upx;
		background-color: #FFFFFF;
	}
	
	.pay-head {
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1px solid rgba(229,229,229,0.5);
		padding-left: 30upx;
		padding-right: 30upx;
		height: 87upx;
	}
	.pay-head-i{
		position: absolute;
		color: #999999;
		line-height: 90upx;
		font-size: 35upx;
		left: 30upx;
	}
	.pay-head-text{
		font-size: 36upx;
		color: #333333;
	}
	.pay-n {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 66upx;
		height: 104upx;
		margin-top: 20upx;
		color: #333333;
	}
	.pay-pattern {
		font-size: 34upx;
		color: #999999;
		padding: 20upx 0 20upx 30upx;
		border-bottom:2upx solid rgba(229,229,229,1);
	}
	
	.bank-card-box {
		height: 306upx;
	}
	.row4_item {
		width: 690upx;
		padding: 0 30upx;
		height: 101upx;
		line-height: 101upx;
		display: flex;
		justify-content: space-between;
		border-bottom:2upx solid rgba(229,229,229,1);
	}
	.row4_item_letf {
		display: flex;
		justify-content: flex-start;
		height: 101upx;
		line-height: 101upx;
	}
	.row4_item_letf text{
		color: #333333;
		font-size: 34upx;
	}
	.row4_item_letf .iconfont{
		font-size: 40upx;
		line-height: 101upx;
		margin-right: 16upx;
	}
	.icon-styl0{
		color: #FFB800;
	}
	.icon-styl1 {
		color: #1296DB !important;
	}
	.icon-styl2 {
		color: #41B035 !important;
	}
	.icon-styl3{
		color: #00D5A2;
	}
	.icon-styl4{
		color: #2F77F1;
	}
	.icon-styl5{
		color: #999999;
		display: inline-flex;
		line-height: 98upx !important;
	}
	.iconduigou{
		color: #00D5A2;
		font-size: 36upx;
		line-height: 101upx;
	}
	.pay-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 40upx;
		width: 690upx;
		height: 80upx;
		background-color: #00D5A2;
		color: #ffffff;
		font-size: 34upx;
		border-radius:8upx;
	}
</style>
